/*
  学习目标：Redux管理数据，并在组件卸载时，不销毁数据
  步骤：
     1. 创建store  src/store/index.js
     2. 创建reducer  store/reducer/index.js
    3. 调用createStore去创建 store
     4. 导入React。使用getState().count 作为初始值
     5. 挂载后，监听store变化，调用setCount更新界面
     6. dispatch触发
*/

import { useEffect, useState } from "react";
import store from "./store";

console.log("store  ----->  ", store);

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  const [count, setCount] = useState(store.getState().count);

  // 4.数据存入redux中

  // 5.
  useEffect(() => {
    store.subscribe(() => {
      console.log("store.getState().count  ----->  ", store.getState().count);
      setCount(store.getState().count);
    });
  }, []);

  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      {/* Redux支负责数据的保存、修改， 💥不驱动视图 */}
      {/* React是负责驱动视图 */}
      <button onClick={() => store.dispatch({ type: "add" })}>+1</button>
      <button onClick={() => store.dispatch({ type: "des" })}>-1</button>
    </div>
  );
}
